<template>
  <el-dialog
    :visible.sync="visible"
    title="数据需求申请详情"
    width="1000px"
    :close-on-click-modal="false"
    class="zybm-detail-dialog"
    @close="handleClose"
  >
    <!-- 表单容器：统一包裹所有模块，确保样式一致性 -->
    <el-form class="detail-form" :label-position="labelPosition">
      <!-- 1. 基本信息区域 -->
      <div class="section-card">
        <div class="section-header">
          <i class="el-icon-info-circle section-icon" />
          <div class="section-title">基本信息</div>
        </div>
        <!-- 采用2列布局：将字段分组，减少纵向长度，更规整 -->
        <el-row :gutter="24" class="section-content">
          <!-- 第一列 -->
          <el-col :span="12">
            <el-form-item label="需求资源名称：" class="detail-form-item">
              <div class="form-content">{{ formData.dataName || '未填写' }}</div>
            </el-form-item>

            <el-form-item label="服务方式：" class="detail-form-item">
              <div class="form-content">{{ formData.type || '未填写' }}</div>
            </el-form-item>

            <el-form-item label="数据项：" class="detail-form-item">
              <div class="form-content">{{ formData.dataItem || '未选择' }}</div>
            </el-form-item>

            <el-form-item label="资源覆盖范围：" class="detail-form-item">
              <div class="form-content">{{ formData.resourceRange || '未选择' }}</div>
            </el-form-item>

            <el-form-item label="申请人姓名：" class="detail-form-item">
              <div class="form-content">{{ formData.sqr || '未填写' }}</div>
            </el-form-item>

            <el-form-item label="申请人手机号：" class="detail-form-item">
              <div class="form-content">{{ formData.phone || '未选择' }}</div>
            </el-form-item>

            <el-form-item label="数据所属部门审批意见：" class="detail-form-item">
              <div class="form-content">{{ formData.dataDeptSpyj || '未填写' }}</div>
            </el-form-item>

            <el-form-item label="数据所属部门：" class="detail-form-item">
              <div class="form-content">{{ formData.dataDept || '未填写' }}</div>
            </el-form-item>
          </el-col>

          <!-- 第二列 -->
          <el-col :span="12">
            <el-form-item label="申请人邮箱：" class="detail-form-item">
              <div class="form-content">{{ formData.email || '未填写' }}</div>
            </el-form-item>

            <el-form-item label="应用场景：" class="detail-form-item">
              <!-- 给数据分级加标签样式，突出重要性 -->
              <div class="form-content">{{ formData.appScene || '未填写' }}</div>
            </el-form-item>

            <el-form-item label="起始时间：" class="detail-form-item">
              <div class="form-content">
                {{ (formData.startTime || '未填写') }}
              </div>
            </el-form-item>

            <el-form-item label="结束时间：" class="detail-form-item">
              <div class="form-content">{{ formData.endTime || '未填写' }}</div>
            </el-form-item>

            <el-form-item label="审批状态：" class="detail-form-item">
              <div class="form-content">{{ formData.spzt || '未填写' }}</div>
            </el-form-item>

            <el-form-item label="数据局申请人：" class="detail-form-item">
              <div class="form-content">{{ formData.spr || '未填写' }}</div>
            </el-form-item>

            <el-form-item label="数据所属部门审批人：" class="detail-form-item">
              <div class="form-content">{{ formData.dataDeptSpr || '未填写' }}</div>
            </el-form-item>

            <el-form-item label="审批意见：" class="detail-form-item">
              <div class="form-content">{{ formData.spyj || '未填写' }}</div>
            </el-form-item>

          </el-col>

        </el-row>
      </div>
    </el-form>

    <!-- 底部按钮：居中显示，增加点击区域 -->
    <span slot="footer" class="dialog-footer">
      <el-button
        size="medium"
        style="width: 120px;"
        @click="visible = false"
      >
        关闭
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'DetailsDialog',
  data() {
    return {
      visible: false,
      detailData: null,
      labelPosition: 'right',
      // 1. 初始化formData，包含所有需要渲染的模块字段
      formData: {
        dataName: '',
        type: '',
        dataItem: '',
        resourceRange: '',
        sqr: '',
        phone: '',
        email: '',
        appScene: '',
        startTime: '',
        endTime: '',
        spr: '',
        dataDeptSpr: '',
        spyj: '',
        dataDeptSpyj: '',
        dataDept: ''
      },
      sharedWayMap: { '0': '数据库', '1': 'API服务', '2': '文件' },
      spztMap: { 0: '待数据局初审', 1: '数据局初审通过，数据源部门审核中', 2: '数据局初审通过且已形成数据编目', 3: '数据局初审退回', 4: '数据源部门审核通过，数据局二审', 5: '数据源部门退回', 6: '数据局二审退回至数据源部门', 7: '数据局二审通过' }
    }
  },
  methods: {
    handleClose() {
      this.detailData = null
      // 关闭时重置formData，避免下次打开残留旧数据
      this.formData = {
        dataName: '',
        type: '',
        dataItem: '',
        resourceRange: '',
        sqr: '',
        phone: '',
        email: '',
        appScene: '',
        startTime: '',
        endTime: '',
        spzt: '',
        spr: '',
        dataDeptSpr: '',
        spyj: '',
        dataDeptSpyj: '',
        dataDept: ''
      }
    },
    setDetailData(data) {
      this.detailData = data
      console.log('后端返回的编目详情数据：', data)

      // 1. 处理基本信息模块：编码转文本、数组提取显示值
      const formattedFormData = {
        dataName: data.dataName || '',
        type: this.sharedWayMap[data.type?.toString()] || '未知',
        dataItem: data.dataItem || '',
        resourceRange: data.resourceRange || '',
        sqr: data.sqr || '',
        phone: data.phone || '',
        email: data.email || '',
        appScene: data.appScene || '',
        startTime: data.startTime || '',
        endTime: data.endTime || '',
        spzt: this.spztMap[data.spzt?.toString()] || '未知',
        spr: data.spr || '',
        dataDeptSpr: data.dataDeptSpr || '',
        spyj: data.spyj || '',
        dataDeptSpyj: data.dataDeptSpyj || '',
        dataDept: data.dataDept || ''
      }

      this.formData = formattedFormData
      this.visible = true
    }
  }
}
</script>

<style scoped>
/* 弹窗整体样式 */
.zybm-detail-dialog {
  ::v-deep .el-dialog__body {
    padding: 20px;
    background-color: #fafafa;
  }

  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  ::v-deep .el-dialog__title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
  }
}

/* 模块卡片样式：统一圆角、阴影、间距 */
.section-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 16px;
  margin-bottom: 20px;
  transition: box-shadow 0.3s ease;
}

.section-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 模块标题栏：图标+文本+分割线，增强视觉层次 */
.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.section-icon {
  color: #409EFF;
  font-size: 18px;
  margin-right: 8px;
}

.section-title {
  font-size: 15px;
  font-weight: bold;
  color: #303133;
}

/* 模块内容区：统一内边距 */
.section-content {
  padding: 0 4px;
}

/* 表单项样式：统一标签宽度、间距 */
.detail-form-item {
  margin-bottom: 16px !important;

  ::v-deep .el-form-item__label {
    width: 120px !important;
    text-align: right !important;
    font-size: 14px;
    color: #606266;
    padding-right: 12px;
  }

  ::v-deep .el-form-item__content {
    font-size: 14px;
    color: #303133;
    line-height: 24px;
  }
}

/* 表单内容区：空状态、标签项样式 */
.form-content {
  padding: 2px 0;
}

.empty-tip {
  color: #909399;
  font-size: 13px;
}

.tag-item {
  display: inline-block;
  background-color: #ecf5ff;
  color: #409EFF;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  margin-right: 8px;
  margin-bottom: 6px;
}

.way-item {
  display: inline-flex;
  align-items: center;
  background-color: #f0f9eb;
  color: #67C23A;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 13px;
  margin-right: 8px;
  margin-bottom: 8px;
}

.way-item i {
  margin-right: 4px;
  font-size: 12px;
}

/* 共享条件特殊样式 */
.condition-content {
  background-color: #f5f7fa;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 0px 12px;
  min-height: 36px;
  display: flex;
  align-items: center;
}

/* 状态文本样式 */
.status-text {
  margin-left: 6px;
}

/* 底部按钮区域 */
.dialog-footer {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
</style>
